import { useState } from 'react'
import { Input, List, Tooltip, Whisper } from 'rsuite'
import Placeholder from './Placeholder'

const Empty = ({ onEdit }) => (
  <Placeholder
    onEdit={onEdit}
    text="请添加工作经历"
    slogan="采采产保景伯行？风则突无六才理民免亡袋明满？目统模复往您鞋队阳？飞奖天恩黑姆在治寻。兰苏旧生卖长。除转岁含更预腿音狗队料里似群。"
  />
)
const Display = ({ items, onEdit, onRemove }) =>
  items ? (
    <>
      {items.map((item, index) => (
        <div key={index} className="d-flex justify-content-between">
          <div>
            <h3>{item.company}</h3>
          </div>
          <div>
            <button className="btn btn-link" onClick={() => onEdit(index)}>
              修改
            </button>
            <button className="btn btn-link" onClick={() => onRemove(index)}>
              删除
            </button>
          </div>
        </div>
      ))}
    </>
  ) : null

const Edit = ({ index, data, onSubmit, onCancel }) => {
  const [local, setLocal] = useState(data)

  const update = (fieldName) => (value) =>
    setLocal({ ...local, [fieldName]: value })
  return (
    <div>
      <div className="mb-3">
        <label className="form-label">公司名</label>
        <Input
          defaultValue={local.company}
          size="md"
          onChange={update('company')}
        />
      </div>

      <div className="mb-3">
        <button
          className="btn btn-primary"
          onClick={() => {
            onSubmit()('update', index, local)
          }}
        >
          {index === -1 ? '添加' : '修改'}
        </button>{' '}
        <button className="btn btn-danger" onClick={onCancel}>
          取消
        </button>
      </div>
    </div>
  )
}

const Experience = ({ data, isEdit, onSubmit, onCancel, onEdit }) => {
  const [editIndex, setEditIndex] = useState(-1)
  const handleEdit = (index) => {
    setEditIndex(index)
    onEdit()
  }
  const handleRemove = (index) => {
    onSubmit('remove', index)
  }
  const isAdd = isEdit
  // console.log(data)
  return (
    <>
      {!isAdd && !data.length && <Empty onEdit={onEdit} />}
      {data.length > 0 && !isAdd && editIndex === -1 && (
        <Display items={data} onEdit={handleEdit} onRemove={handleRemove} />
      )}
      {editIndex === -1 && isAdd && (
        <Edit
          {...{
            index: -1,
            data: {},
            onSubmit: ()=>{
              setEditIndex(-1)
              return onSubmit
            },
            onCancel,
          }}
        />
      )}
      {editIndex > -1 && (
        <Edit
          {...{
            index: editIndex,
            data: data[editIndex],
            onSubmit: ()=>{
              setEditIndex(-1)
              return onSubmit
            },
            onCancel: () => {
              setEditIndex(-1)
              onCancel()
            },
          }}
        />
      )}
    </>
  )
}

export default Experience
